<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap Admin</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="stylesheets/theme.css">
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">

    <script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height: 300px;
            width: 800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        
        .brand {
            font-family: georgia, serif;
        }
        
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>

    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<body class="">

    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav pull-right">

                <li id="fat-menu" class="dropdown">
                    <a href="" role="button" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="icon-user"></i> 您好，用户名
                    </a>
                </li>
            </ul>
            <a class="brand" href=""> <span class="second">富丽堂皇大宾馆</span><span class="first"></span></a>
        </div>
    </div>


    <div class="sidebar-nav">
        <a href="#dashboard-menu" class="nav-header" data-toggle="collapse"><i class="icon-dashboard"></i>菜单</a>
        <ul id="dashboard-menu" class="nav nav-list collapse in">
            <li class="active"><a href="bookMsg.html">预约信息</a></li>
        </ul>

        <a href="#accounts-menu" class="nav-header" data-toggle="collapse"><i class="icon-briefcase"></i>后台管理</a>
        <ul id="accounts-menu" class="nav nav-list collapse in">
            <li><a href="config/configs.html">网站配置管理</a></li>
            <li><a href="aboutUs/abouts.html">关于我们管理</a></li>
            <li><a href="connectUs/connects.html">联系我们管理</a></li>
            <li><a href="nav/navs.html">导航管理</a></li>
            <li><a href="room/rooms.html">客房管理</a></li>
            <li><a href="menu/menus.html">菜单管理</a></li>
            <li><a href="root/users.html">用户管理</a></li>
        </ul>


    </div>


    <div class="content">

        <div class="header">

            <h1 class="page-title">入住登记</h1>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">

                <div class="well" style="margin-top: 20px;">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab">顾客信息</a></li>
                        <li><a href="#profile" data-toggle="tab">身份验证</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane active in" id="home">
                            <form id="tab">
                                <label>姓名</label>
                                <input type="text" value="" class="input-xlarge">
                                <label>房间类型</label>
                                <input type="text" value="" class="input-xlarge">
                                <label>联系电话</label>
                                <input type="text" value="" class="input-xlarge">
                                <label>入住日期</label>
                                <input type="text" value="" class="input-xlarge">
                                <label>离去日期</label>
                                <input type="text" value="" class="input-xlarge">
                                <label>价格</label>
                                <input type="text" value="" class="input-xlarge">

                                <label>房号</label>
                                <select name="roomId" id="DropDownTimezone" class="input-xlarge">
                                     <option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
                                 </select>
                                <div class="btn-toolbar">
                                    <button type="submit" class="btn btn-primary"><i class="icon-save"  style="padding-right: 5px;"></i>保存</button>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="profile">
                            <form action="" id="tab2">
                                <div style="float: left;">
                                    <label>预约证件</label>
                                    <img src="" style="height: 200px;width: 280px;">
                                </div>
                                <div style="float: left;margin-left: 50px;margin-top: 100px;">
                                    <input type="submit" class="btn btn-primary" value="验证">
                                </div>
                                <div style="float: left;margin-left: 50px;">
                                    <label>顾客照片<!-- 选择图片 -->
                                        <input id="filed" type="file" name="" id="" accept="image/*">
                                    </label>
                                    <img id="imgshow" src="" alt="" style="height: 200px;width: 280px;" />
                                </div>

                            </form>
                        </div>
                    </div>

                </div>

                <footer>
                    <hr>
                    <p>&copy; 2012 <a href="#" target="_blank">Portnine</a></p>
                </footer>

            </div>
        </div>
    </div>



    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript">
        $("[rel=tooltip]").tooltip();
        $(function() {
            $('.demo-cancel-click').click(function() {
                return false;
            });
        });
    </script>
    <script>
        //在input file内容改变的时候触发事件
        $('#filed').change(function() {
            //获取input file的files文件数组;
            //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
            //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
            var file = $('#filed').get(0).files[0];
            //创建用来读取此文件的对象
            var reader = new FileReader();
            //使用该对象读取file文件
            reader.readAsDataURL(file);
            //读取文件成功后执行的方法函数
            reader.onload = function(e) {
                //读取成功后返回的一个参数e，整个的一个进度事件
                console.log(e);
                //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                //的base64编码格式的地址
                $('#imgshow').get(0).src = e.target.result;
            }
        })
    </script>
    <!-- 
        ajax下拉列表获取空房间的房号
        <script>
        function queryRoomsId() {
            var optionJson = [];
            $.ajax({
                type: "post",
                url: "/queryRoomsId",
                data: {},
                async: false,
                success: function(data) {
                    optionJson = data;
                    var selectObj = document.getElementById("DropDownTimezone");
                    for (var i = 0; i < optionJson.length; i++) {
                        selectObj.add(new Option(optionJson[i], optionJson[i]));
                    }
                }

            });

        }
    </script> -->

</body>

</html>